<template>
  <div>
    <el-form ref="myform" :model="formItem" :rules="rules" label-width="100px" size="mini">
      <el-form-item label="状态" prop="status">
        <el-radio v-for="(item) in status" :key="item.value" v-model="formItem.status" :label="item.value">{{ item.label }}</el-radio>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="formItem.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="cron表达式" prop="cron">
        <el-input v-model="formItem.cron" placeholder="请输入cron表达式" @focus="showCronBox =true" />
      </el-form-item>
      <el-form-item label="执行类名" prop="jobClass">
        <el-input v-model="formItem.jobClass" placeholder="请输入执行类名" />
      </el-form-item>
      <el-form-item label="执行组" prop="jobGroup">
        <el-input v-model="formItem.jobGroup" placeholder="请输入执行组" />
      </el-form-item>
      <el-form-item label="描述" prop="jobDesc">
        <el-input v-model="formItem.jobDesc" type="text" placeholder="请输入描述" />
      </el-form-item>
      <el-form-item label="数据">
        <el-input v-model="formItem.jobData" type="text" placeholder="{}">
          <i slot="prefix" class="el-input__icon el-icon-question" :title="titleMsg" />
        </el-input>
      </el-form-item>
    </el-form>
    <SelectDialog v-if="showCronBox" title="表达式" :append-to-body="true" :show="showCronBox" @on-ok="ok" @on-cancel="cancel">
      <Cron :value="formItem.cron" @input="cronChange" />
    </selectdialog></div>
</template>

<script>
import SelectDialog from '@neu/biz-core/components/SelectDialog'
import Cron from '@neu/biz-core/components/Cron'
import {
  create,
  update,
  detail
} from '@neu/dcam-ui/api/sysTask'

// 定义一个表单原始项
const formItem = {
  name: '',
  cron: '',
  status: 'active',
  jobClass: '',
  jobGroup: '',
  jobDesc: '',
  jobData: ''
}

export default {
  name: 'SysTaskEditForm',
  components: {
    Cron,
    SelectDialog
  },
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      showCronBox: false,
      /** 启用状态 */
      status: [{ value: 'active', label: '启用' }, { value: 'notActive', label: '未启用' }],
      // 编辑的表单内容
      formItem: {
        ...formItem
      },
      // 表单验证规则
      rules: {
        status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        cron: [{ required: true, message: 'cron表达式不能为空', trigger: 'blur' }],
        jobClass: [{ required: true, message: '执行类名不能为空', trigger: 'blur' }],
        jobGroup: [{ required: true, message: '执行组不能为空', trigger: 'blur' }],
        jobDesc: [{ required: true, message: '描述不能为空', trigger: 'blur' }]
      },
      modal: true,
      titleMsg: `定时任务运行时变量及数据，json格式：
      {
        "key":"value",
        "key1":"value1"
      }
      请注意是双引号
      `
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: function() {
      this.fetch()
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    // 初始化表单数据
    fetch() {
      if (this.id !== -1) {
        detail(this.id).then(response => {
          this.formItem = {
            ...response.data
          }
        })
      } else {
        this.formItem = {
          ...formItem
        }
      }
    },
    // 保存操作，返回promise，后续处理交由调用者处理
    save() {
      const updated = this.id !== -1
      return new Promise(resolve => {
        this.$refs.myform.validate((valid) => {
          if (valid) {
            if (this.formItem.jobData) {
              if (!this.isJSON(this.formItem.jobData)) {
                return this.$message({
                  showClose: true,
                  message: '数据字段必须为Json格式！',
                  type: 'error'
                })
              }
            }
            if (updated) {
              resolve(update(this.id, this.formItem))
            } else {
              resolve(create(this.formItem))
            }
          } else {
            resolve(false)
          }
        })
      })
    },
    reset() {
      this.$refs.myform.resetFields()
    },
    ok() {
      this.showCronBox = false
    },
    cancel() {
      this.showCronBox = false
      this.cronChange('')
    },
    cronChange(v) {
      this.formItem.cron = v
    },
    isJSON(str) {
      if (typeof str === 'string') {
        if (str === '{}') {
          return false
        }
        try {
          var obj = JSON.parse(str)
          if (typeof obj === 'object' && obj) {
            return true
          } else {
            return false
          }
        } catch (e) {
          return false
        }
      } else {
        return false
      }
    }
  }
}
</script>
